<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询商品</title>
    <!-- 引入 jquery -->
    <script src="/wbs20052/ajax/day02/jquery.min.js" ></script>
    <script>
        function getProduct() {
            var pid = document.getElementById("pid").value;
            var jqXHR = $.ajax({
                url:"http://localhost/wbs20052/ajax/day01/getProduct.php",
                type: "post",
                dataType: "json",
                data: {pid},
                // success: function(result) {
                //     console.log(result);
                //     document.getElementById("name").innerText = result.p_name;
                //     document.getElementById("price").innerText = result.p_price;
                // },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR, textStatus, errorThrown);
                }
            });
            jqXHR.done(function(result){
                console.log(result);
                document.getElementById("name").innerText = result.p_name;
                document.getElementById("price").innerText = result.p_price;
            });

        }
    </script>
</head>
<body>
    <input type="text" id="pid" placeholder="请输入商品编号">
    <input type="button" value="查询" onclick="getProduct()" >
    <div>
        <h3>商品信息</h3>
        <div>
            <div id="name"></div>
            <div id="price"></div>
        </div>
    </div>
</body>
</html>